<template>
  <div>
    <div class="gameSetting">
      <div class="title">游戏</div>
      <van-cell-group inset>
        <van-cell
          is-link
          title="网格类型"
          :value="range + ' x ' + range"
          @click="showRange = true" />
        <van-action-sheet v-model="showRange" :actions="rangeActions" @select="onSelectRange" />
        <van-cell is-link title="游戏难度" :value="level + '%'" @click="showLevel = true" />
        <van-action-sheet v-model="showLevel" :actions="levelActions" @select="onSelectLevel" />
      </van-cell-group>
    </div>
    <div class="recordSetting">
      <div class="title">记录</div>
      <van-cell-group inset>
        <van-cell title="记录失败">
          <template #right-icon>
            <van-switch v-model="checked" size="20px" @input="onInput" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      showRange: false,
      showLevel: false,
      rangeActions: [{ name: "10 x 10" }, { name: "15 x 15" }, { name: "20 x 20" }],
      levelActions: [
        { name: "10%" },
        { name: "15%" },
        { name: "20%" },
        { name: "25%" },
        { name: "30%" },
        { name: "35%" },
        { name: "40%" },
      ],
      checked: true,
    };
  },
  methods: {
    ...mapMutations("setting", ["setRange", "setLevel", "setRecordFail"]),
    ...mapMutations("audio", ["beginClickBg"]),
    onSelectRange(item) {
      this.beginClickBg();
      this.setRange(Number(item.name.substr(0, 2)));
      this.showRange = false;
    },
    onSelectLevel(item) {
      this.beginClickBg();
      this.setLevel(Number(item.name.substr(0, 2)));
      this.showLevel = false;
    },
    onInput(checked) {
      this.beginClickBg();
      this.setRecordFail(checked);
    },
    init() {
      this.checked = this.recordFail;
    },
  },
  computed: {
    ...mapState("setting", ["range", "level", "recordFail"]),
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="less" scoped>
.gameSetting {
  .title {
    height: 40px;
    padding-left: 20px;
    line-height: 40px;
    color: #8c99a0;
  }
}
.recordSetting {
  .title {
    height: 40px;
    padding-left: 20px;
    line-height: 40px;
    color: #8c99a0;
  }
}
</style>
